<template>
    <div class="cpins">
        <div class="tags-header">
            <div class="tags-header-title">
                收藏
            </div>
            <div class="tags-sort">
                <router-link :to="{path:'/user/123/cposts'}" class="tags-type">收藏的文章</router-link>
                <router-link :to="{path:'/user/123/cpins'}" class="tags-type active">收藏的沸点</router-link>
            </div>
        </div>
        <div>
            <ul class="cpin-list">
                <li class="cpin-item">
                    <div class="cpin">
                        <div class="cpin-header-row">
                            <div class="account-group">
                                <div class="user-popover">
                                    <router-link :to="{path:'/user/123'}" class="popover-link">
                                        <img class="avatar" src="../../assets/img/user_avatar/avatar.png" alt="">
                                    </router-link>
                                </div>
                                <div class="cpin-header-content">
                                    <div class="user-popover">
                                        <router-link class="username" :to="{path:'/user/123'}">李思涵</router-link>
                                    </div>
                                    <div class="user-meta">
                                        <div class="position ellipsis">
                                            前端开发 @ 未知公司
                                        </div>
                                        <div class="dot">·</div>
                                        <router-link class="time" :to="{path:'/user/123'}">1天前</router-link>
                                    </div>
                                </div>
                            </div>
                            <div class="begin-follow">
                                <button class="subscribe-btn follow-button">
                                    <span>关注</span>
                                </button>
                            </div>
                        </div>
                        <div class="cpin-content-row">
                            <div class="content-box">
                                <span>唐探和李焕英，二选一，选哪个</span>
                            </div>
                        </div>
                        <div class="cpin-action-row">
                            <div class="action-box">
                                <div class="like-action action">
                                    <div class="action-title-box">
                                        <!--<i class="like"></i>-->
                                        <span class="action-title">点赞</span>
                                    </div>
                                </div>
                                <div class="action">
                                    <div class="action-title-box">
                                        <!--<i class="comment"></i>-->
                                        <span class="action-title">评论</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="cpin-item">
                    <div class="cpin">
                        <div class="cpin-header-row">
                            <div class="account-group">
                                <div class="user-popover">
                                    <router-link :to="{path:'/user/123'}" class="popover-link">
                                        <img class="avatar" src="../../assets/img/user_avatar/avatar.png" alt="">
                                    </router-link>
                                </div>
                                <div class="cpin-header-content">
                                    <div class="user-popover">
                                        <router-link class="username" :to="{path:'/user/123'}">李思涵</router-link>
                                    </div>
                                    <div class="user-meta">
                                        <div class="position ellipsis">
                                            前端开发 @ 未知公司
                                        </div>
                                        <div class="dot">·</div>
                                        <router-link class="time" :to="{path:'/user/123'}">1天前</router-link>
                                    </div>
                                </div>
                            </div>
                            <div class="begin-follow">
                                <button class="subscribe-btn follow-button">
                                    <span>关注</span>
                                </button>
                            </div>
                        </div>
                        <div class="cpin-content-row">
                            <div class="content-box">
                                <span>唐探和李焕英，二选一，选哪个</span>
                            </div>
                        </div>
                        <div class="cpin-action-row">
                            <div class="action-box">
                                <div class="like-action action">
                                    <div class="action-title-box">
                                        <!--<i class="like"></i>-->
                                        <span class="action-title">点赞</span>
                                    </div>
                                </div>
                                <div class="action">
                                    <div class="action-title-box">
                                        <!--<i class="comment"></i>-->
                                        <span class="action-title">评论</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Cpins"
    }
</script>


<style scoped>
    .tags-sort .tags-type.active{
        color:#000
    }
    .cpins .tags-header{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 0 28px;
        height: 50px;
        white-space: nowrap;
        border-bottom: 2px solid rgba(230,230,231,.5);
        background-color: #fff;
    }
    .tags-header .tags-header-title{
        font-size: 15px;
        font-weight: 600;
        color: #000;
    }
    .tags-header .tags-sort{
        margin-left:auto
    }
    .tags-sort .tags-type{
        position: relative;
        padding: 12px 0;
        font-size: 14px;
        color: #72777b;
    }
    .tags-sort .tags-type:not(:last-child) {
        margin-right: 24px;
    }
    .tags-sort .tags-type:not(:last-child)::after{
        content:"";
        position:absolute;
        display:block;
        top: 50%;
        right: -12px;
        margin-top: -7px;
        width: 1px;
        height: 14px;
        background-color: #b2bac2;
        opacity: .5;
    }


    .cpin-item{
        margin-bottom: 8px;
        background-color: #fff;
    }
    .cpin-header-row{
        display: flex;
        justify-content: space-between;
        padding: 16px 24px 0 20px;
    }
    .account-group{
        display:flex
    }
    .cpin-header-row{
        align-items: center;
    }
    .user-popover{
        display:inline-block
    }
    .popover-link{
        font-size:0
    }
    .cpin-header-row .avatar{
        flex: 0 0 auto;
        width: 45px;
        height: 45px;
        border-radius: 50%;
    }
    .cpin-header-row .cpin-header-content{
        margin-left:12px
    }
    .cpin-header-row .username{
        font-size: 15px;
        font-weight: 600;
        color: #2e3135;
    }
    .cpin-header-row .user-meta{
        display: flex;
        align-items: center;
        margin:4px 0 0;
        font-size: 13px;
        color: #8a9aa9;
    }
    .cpin-header-row .user-meta .position {
        max-width: 280px;
    }
    .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cpin-header-row .user-meta .dot {
        margin: 0 6.5px;
    }
    .cpin-header-row .user-meta .time{
        color:#8a9aa9;
    }
    .begin-follow .follow-button{
        margin: 0 0 0 auto;
        padding: 0;
        width: 55px;
        height: 26px;
        font-size: 13px;
        border:1px solid #6cbd45;
        color: #6cbd45;
        background-color:#fff;
        cursor: pointer;
        border-radius: 2px;
    }
    .begin-follow .follow-button:hover{
        opacity:.8
    }
    /*动态的内容区域*/
    .cpin-content-row{
        margin-top:5px;
        margin-bottom:5px;
        margin-left:77px;
        margin-right:48px;
    }

    .cpin-content-row .content-box{
        font-size: 15px;
        line-height: 1.6;
        color: #17181a;
        overflow: hidden;
        white-space: pre-line;
    }
    /*动态的点赞评论*/
    .cpin-action-row .action-box{
        display: flex;
        position: relative;
        margin-top: 16px;
        height: 34px;
        border-top: 1px solid #ebebeb;
    }
    .cpin-action-row .action{
        flex: 1 1 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 100%;
        cursor: pointer;
        user-select: none;
    }
    .cpin-action-row .like-action::after{
        content:"";
        position:absolute;
        top: 50%;
        right: 0;
        margin-top: -12px;
        width: 1px;
        height: 24px;
        background-color: #ebebeb;
    }
    .cpin-action-row .action-title-box{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cpin-action-row .action-title{
        margin-left: 4px;
        font-size: 13px;
        font-weight: 500;
        color: #8a93a0;
    }
    .cpin-action-row .action:hover{
        opacity:.8
    }
</style>






